let data = null;
$.ajax({
    type: "POST",
    url: "http://www.shouziliu.com/LTO/cpzs/",
    processData: false,
    async: false,
    success(adata) {
        data = adata
        console.log(data);
    }
})
let oldData = data;

// <div><img src="img/kay/` + data[i].img + `" alt=""><h3>` + data[i].name + `</h3><p>` + data[i].price + `</p></div>
// build(data.wsxl, 6, index, $('.aa'))
function build(data, num, index, box) {

    for (let i = (index*num); i < (index + 1) * num; i++) {
        if (data[i]) {
            box.append($(`
    <div><img src="img/kay/${data[i].img}" alt=""><h3>${data[i].name} </h3></div>
    `));
        }
    }
}

build(data.wsxl, 6, 0, $('.aa'))
build(data.ktxl, 6, 0, $('.bb'))
build(data.ctxl, 6, 0, $('.cc'))


// 索引
function buIndex(data,box){
    let allNum =data.length;
    let page = Math.floor(allNum / 6) + 1;
    console.log(page);
    for (let i = 0; i < page; i++) {
        box.append($(`<li>${i + 1}</li>`))
    }
}
buIndex(data.wsxl,$('.zz'))
buIndex(data.ktxl,$('.xx'))
buIndex(data.ctxl,$('.vv'))
//点击索引


// indexClik($('.zz'))
// indexClik($('.xx'))
// indexClik($('.vv'))

// $('.zz').on('click',function (event) {
//         console.log($(event.target).html());
//       let index=  $(event.target).html();
//     $('.aa').html("");
//         build(data.wsxl, 6, index-1, $('.aa'))
//     })

// $('.xx').on('click',function (event) {
//     console.log($(event.target).html());
//     let index=  $(event.target).html();
//     $('.bb').html("");
//     build(data.ktxl, 6, index-1, $('.bb'))
// })

// $('.vv').on('click',function (event) {
//     console.log($(event.target).html());
//     let index=  $(event.target).html();
//     $('.cc').html("");
//     build(data.ctxl, 6, index-1, $('.cc'))
// })

indexCik($('.vv'),   $('.cc'),data.ctxl)
indexCik($('.xx'),     $('.bb'),data.ktxl)
indexCik($('.zz'),    $('.aa'),data.wsxl)

function indexCik(oLi,box,data) {
    oLi.on('click',function (event) {
        console.log($(event.target).html());
        let index=  $(event.target).html();
        box.html("");
        build(data, 6, index-1, box)
    })
}











// data.ktxl.forEach(function (data) {
//     $(".bb").append((`
//     <div><img src="img/kay/` + data.img + `" alt=""><h3>` + data.name + `</h3><p>` + data.price + `</p></div>
//     `))
// })
// data.ctxl.forEach(function (data) {
//     $(".cc").append((`
//     <div><img src="img/kay/` + data.img + `" alt=""><h3>` + data.name + `</h3><p>` + data.price + `</p></div>
//     `))
// })
